<template>
  <div class="content">
    <ul>
      <li v-for="item in $store.getters.infolist" :key="item.id">
        <input
          type="checkbox"
          :checked="item.done"
          @change="
            (e) => {
              $store.commit('cbStatusChanged', { e, id: item.id })
            }
          "
        />
        {{ item.info }}
        <button @click="$store.commit('clearById', item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.content {
  box-sizing: border-box;
  height: 500px;
  overflow: auto;
  padding: 20px 20px;
}
li {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
button {
  box-sizing: border-box;
  width: 80px;
  color: skyblue;
  text-align: center;
  line-height: 20px;
  font-size: 24px;
}
button:hover {
  background-color: skyblue;
  color: #fff;
  border: 1px solid skyblue;
}
</style>
